<template>
  <div id="TeachingEducation">
    <div class="left">
      <div class="leftBar">
        <ul class="survey_ul">
          <router-link v-for= "item in items" :to="item.url" :key="item.id">
            <li class="survey_li" style="font-size:1.1rem">{{item.name}}</li>
          </router-link>
        </ul>
      </div>
      <ContactUs/>
    </div>
    <div class="content">
      <div class="position-div">
        <span>■ {{pageName}}</span>
        <span>当前位置：{{pageName}}</span>
      </div>
      <div class="page-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import baseConfig from 'baseConfig'
  import ContactUs from '../common/ContactUs'
  import $ from 'Jquery'
  import {Storage} from '../../publicLib/utils-lib/main'

  let localStorage = new Storage('localStorage');

  export default {
    name: 'TeachingEducation',
    data () {
      return {
        items: baseConfig.leftbar_xjpxmap,
        contact_map: baseConfig.contact_map,
        pageName: '宣教培训'
      }
    },
    components: {
      ContactUs
    },
    methods: {
      /* 设置导航栏选中状态 */
      navSelectHandle: function () {
        $('.survey_ul li').eq(0).addClass('select');
        $('.survey_ul li').each(function (index) {
          $(this).click(function () {
            $('.survey_ul li').removeClass('select');
            $('.survey_ul li').eq(index).addClass('select');
            //记录当前导航栏索引值
            localStorage.setItem('teachingEducationBarIndex', index);
          })
        })
      },
      /* 刷新浏览器后导航栏重定位 */
      redirctBar: function () {
        let curIndex = localStorage.getItem('teachingEducationBarIndex');

        if (curIndex) {
          $('.survey_ul li').each(function (index) {
            let dom = $('.survey_ul li');
            dom.removeClass('select');
            if (index === parseInt(curIndex)) {
              dom.eq(index).addClass('select');
              return false;
            }
          })
        }
      },
      /* 查询路由跳转的是哪个子页面 */
      getSonPageNameByTo:function (to){
        let name = to.path.split('/')[2];

        switch (name) {
          case 'TeachingOne':
            return '宣教培训';
          case 'TeachingTwo':
            return '宣教培训2';
          case 'TeachingThree':
            return '宣教培训3';
          case 'TeachingFour':
            return '宣教培训4';
          default:
            return ''
        }
      }
    },
    mounted () {
      this.navSelectHandle();
      this.redirctBar();
    },
    watch: {
      /* 监听路由 */
      $route(to, from) {
        this.pageName = this.getSonPageNameByTo(to);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'publicLib/scss/defualtScss.scss';

  .select{
    background-color: $contect-us-color;
    color: white;
  }

  #TeachingEducation {
    display: flex;
    position: relative;
    align-items: left;
    background-color: white;
    min-height: 25rem;

    .left{
      width: 18%;
      float: left;
      display: inline-block;
      .leftBar {
        background-color: $more-title-color;

        .survey_ul{

          li{
            list-style-type: none;
            padding: 0.8rem 2rem;
            border-bottom: 1px dotted $border-color-2;
            color: white;

            &:hover{
              color: $border-color-2;
            }
          }
        }
      }
    }

    .content {
      width: 80%;
      padding: 1rem;
      clear: both;
      position: relative;
      display: inline-block;
      top: 0;
      padding-bottom: 250px;

      .position-div{
        width: 100%;
        text-align: left;
        border-bottom: 1px dotted $border-color-2;

        span:first-child{
          color:$contect-us-color;
          font-weight: bold;
          font-size: 1.1rem;
        }

        span:nth-child(2){
          float: right;
          font-size: $font-size-default;
        }
      }

      .page-content{
        clear: both;
        margin: 1rem;
      }
    }
  }
</style>
